<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="no" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>体检报告详情</title>
<link rel="stylesheet" href="<?=Yii::app()->baseUrl?>/css/reset-mobile.min.css"/>
<script src="<?=Yii::app()->baseUrl?>/js/jquery/jqueryCut.js"></script>
<script src="<?=Yii::app()->baseUrl?>/js/touch-0.2.13.min.js"></script>
<style type="text/css">
body {
  background: #F2F8FB;
  font-size: 14px;
}
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: #000;
}
table {
  border-collapse: collapse;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
#fix-point {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
}
.tabs {
  z-index: 100;
  position: relative;
}
.tabs-nav {
  display: -webkit-box;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}
.tabs-nav li {
  width: 50%;
  border: solid #CACAD9;
  font-size: 1.2em;
  border-width: 1px 0 1px 1px;
  -webkit-box-flex: 1;
  text-align: center;
  color: #898989;
  height: 35px;
  line-height: 35px;
  white-space: nowrap;
  z-index: 100;
}
.tabs-nav li img {
  float: right;
  position: relative;
  top: 6px;
  right: 10px;
}
.tabs-nav li:last-child {
  border-right: 1px solid #CACAD9;
}
.tabs-nav li.state-active {
  background: #fff;
  border-bottom-color: #fff;
  border-top: 3px solid #FDB575;
  color: #FF7800;
  height: 33px;
}
.major-item-wrapper {
  width: 96%;
  margin: 10px auto 0;
}
.major-item {
  width: 33%;
  height: 35px;
  line-height: 35px;
  float: left;
  text-align: center;
  font-size: 1.2em;
  border: solid #CACAD9;
  border-width: 0 0 1px 1px;
}
.major-item:nth-child(3n),
.major-item:last-child {
  border-right: 1px solid #CACAD9;
}
.major-item:nth-child(1),
.major-item:nth-child(2),
.major-item:nth-child(3) {
  border-top: 1px solid #CACAD9;
}
.major-item-wrapper .state-active {
  background: #2FB5B9;
  color: #fff;
}
.sub-items {
  width: 96%;
  margin: 0 auto 20px;
  background: #fff;
  border: 1px solid #B0B0B0;
  border-radius: 4px;
}
.sub-items td img {
  width: 14px;
  height: 14px;
  float: left;
  margin-right: 2px;
  z-index: 1;
}
.sub-item-title {
  margin: 20px 0 10px 10px;
}
.sub-item-title h2 {
  float: left;
}
.sub-item-title .excep {
  float: right;
  margin-right: 10px;
  font-size: 1.1em;
}
.sub-item-title .excep .round {
  width: 1.1em;
  height: 1.1em;
  line-height: 1.1em;
  background: #FF8383;
  display: inline-block;
  border-radius: 1.1em;
  color: #fff;
  text-align: center;
  font-size: .9em;
  margin-right: 2px;
}
.sub-items table {
  width: 100%;
}
.sub-items table tr {
  font-size: 1.1em;
  border-bottom: 1px dashed #BFC8C8;
}
.sub-items table tr:last-child {
  border: 0;
}
.sub-items table tr th {
  width: 100px;
  font-weight: normal;
  padding: 15px 10px;
  text-align: left;
}
.sub-items table td {
  padding: 5px 0 5px 0;
  text-align: center;
}
.sub-items table td a {
  text-align: center;
}
.sub-items table tr.li01 {
  background: #FFDCDC;
}
.sub-items table tr.li02 {
  background: #BCF6E7;
}
.sub-items table tr td span.link {
  float: right;
  margin-right: 4px;
}
.sub-items table tr td span.link {
  width: 22px;
  height: 22px;
  display: inline-block;
}
.sub-items table tr.lino td span.link {
  background-image: url("<?=Yii::app()->baseUrl?>/images/tj_28.png");
}
.sub-items table tr div.cnt-wrapper {
  width: 96%;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
}
.sub-items table tr:last-child div.cnt-wrapper {
  border: 0;
}
</style>
</head>
<body>
<div id="fix-point" class="fixed clearfix">
  <div class="tabs">
    <ul class="tabs-nav">
      <li id="chg-item" class="state-active">全部项目 <img src="<?=Yii::app()->baseUrl?>/images/down.svg" alt=""/></li>
      <li>异常项</li>
    </ul>
  </div>
  <ul class="major-item-wrapper clearfix">
    <?php foreach ($result as $key=>$it):
      if($key == "basic")
        continue;
      ?>
      <li class="major-item"><?=$key?></li>
    <?php  endforeach;?>
  </ul>
</div>
<div class="exam-item clearfix" style="margin-top: 40px">
  <div class="sub-item-title clearfix">
    <h2>基本信息</h2>
  </div>
  <div class="sub-items">
    <table>
      <?php
      foreach ($result["basic"]["items"] as $it):
        ?>
        <tr class="li03"><th><?=$it->name?></th><td><?=$it->value?></td><td style="width: 80px"></td></tr>
      <?php
      endforeach;
      ?>
    </table>
  </div>
</div>
<div class="exam-item clearfix" style="margin-top: -20px">
  <?php foreach ($result as $key=>$it):
    if($key == "basic")
      continue;
    ?>
    <div class="sub-item-title clearfix">
      <h2><?=$key?></h2>
      <div class="excep">
        <?php if($it["issue"]!=0):?>
          <span class="round"><?=$it["issue"]?></span><span>项异常</span>
        <?php endif?>
      </div>
    </div>
    <div class="sub-items clearfix">
      <table>
        <tbody>
        <?php
        foreach ($it["items"] as $row):
        ?>
        <tr class="<?=$row->indicator!==null?"lino":""?> <?=$row->issue=='↑'?"li01":($row->issue=='↓'?"li02":"li03")?>">
          <th><?=$row->name?></th>
          <td class="slogan">
            <img src="" alt=""/>
            <?php
            if($row->indicator!==null){
              echo '<a href="'.$this->createUrl("app/examReport/viewMobile/",array("id"=>$row->indicator->id)).'">';
            }
            ?>
            <?=$row->value?>
            <span class="link"></span>
            <span style="float: right;width: 60px;height: 22px;text-align: right;margin: 0 10px 0 0"><?=$row->unit?></span>
            <?php
            if($row->indicator!==null){
              echo '</a>';
            }
            ?>
          </td>
        </tr>
        <?php
        endforeach;
        ?>
        </tbody>
      </table>
    </div>
  <?php  endforeach;?>
</div>
</body>
</html>
<script language="javascript">
var show = false;
$(function () {
  /*$('.sub-items table tr').on('click', function () {
    if($(this).find('a').attr('href')) {
      window.location = $(this).find('a').attr('href');
    }
  });*/
  $('.basic-info li').eq(2).after($('.basic-info li').eq(1));  //调整位置，方便两列显示
  $('ul.major-item-wrapper').hide();  //默认隐藏选择框
  $('.major-item:first-child').addClass('state-active');  //默认第一个选中
  $('div.sub-items tr.li01 td.slogan img').attr('src', '<?=Yii::app()->baseUrl?>/images/arrow-up.svg');
  $('div.sub-items tr.li02 td.slogan img').attr('src', '<?=Yii::app()->baseUrl?>/images/arrow-down.svg');
<!--  $('div.sub-items tr.li03 td.slogan img').attr('src', '--><?//=Yii::app()->baseUrl?><!--/images/line.svg');-->
  $('div.sub-items tr.li03 td.slogan img').css('visibility', 'hidden');
  var hgtArr = [];
  var i = 0;
  $('.sub-item-title').each(function () {
    hgtArr[i++] = $(this).position().top;
  });
  function fix () {
    if($('ul.major-item-wrapper').css('display') == 'block') {
      $('ul.major-item-wrapper').hide();
    }
    if(0 === $(this).scrollTop()) {  //滑倒最顶显示默认项
      $('#chg-item').html('全部项目 <img src="<?=Yii::app()->baseUrl?>/images/down.svg" alt=""/>');
      return;
    }
    hgtArr[hgtArr.length] = 99999999;
    for(var i = 0; i < hgtArr.length; i++) {
      if(($(this).scrollTop() >= (hgtArr[i] - 120)) && ($(this).scrollTop() < (hgtArr[i + 1] - 120))) {
        break;
      }
    }
    i === (hgtArr.length+1) ? i = 0 : i ;
    if(i >= 1) {
      $('.major-item').not(i-1).removeClass('state-active');
      $('.major-item').eq(i-1).addClass('state-active');
      $('#chg-item').html($('.major-item').eq(i-1).html());
      $('#chg-item').append(' <img src="<?=Yii::app()->baseUrl?>/images/down.svg" alt=""/>');
    }
  }
  $('#chg-item').on('click', function () {
    if(true === show) {
      $('*').show();
      $('ul.major-item-wrapper').hide();
      $('.tabs-nav li').not(0).removeClass('state-active');
      $('.tabs-nav li').eq(0).addClass('state-active');
      show = false;
    } else {
      if($('ul.major-item-wrapper').css('display') == 'none') {
        $('ul.major-item-wrapper').show();
      } else {
        $('ul.major-item-wrapper').hide();
      }
    }
  });
  $('li.major-item').on('click', function () {
    $('html, body').scrollTop(hgtArr[$(this).index()+1]-20);
    $('ul.major-item-wrapper').hide();
  });
  $('.tabs-nav li:eq(1)').on('click', function () {
    $('.tabs-nav li').not(1).removeClass('state-active');
    $('.tabs-nav li').eq(1).addClass('state-active');
    $('#fix-point').removeClass('fixed');
    $('.exam-item').css('padding', '0');
    $('tr.li03').hide();
    $('.sub-items').each(function () {
      if($(this).children('table').children('tbody').children('tr.li03').length === $(this).children('table').children('tbody').children('tr').length) {
        $(this).prev().hide();
        $(this).hide();
        show = true;
      }
    });
  });
  $(window).on('scroll', function () {
    fix();
  });
  touch.on(window, 'swiperight', function (ev) {
    if(true === show && ev.x > 250) {
      $('*').show();
      $('ul.major-item-wrapper').hide();
      $('.tabs-nav li').not(0).removeClass('state-active');
      $('.tabs-nav li').eq(0).addClass('state-active');
      show = false;
    }
  });
  touch.on(window, 'swipeleft', function (ev) {
    if(false === show && ev.x < -250) {
      $('.tabs-nav li').not(1).removeClass('state-active');
      $('.tabs-nav li').eq(1).addClass('state-active');
      $('tr.li03').hide();
      $('.sub-items').each(function () {
        if($(this).children('table').children('tbody').children('tr.li03').length === $(this).children('table').children('tbody').children('tr').length) {
          $(this).prev().hide();
          $(this).hide();
          show = true;
        }
      });
    }
  });
});
function getElementTop (element) {
  var actualTop = element.offsetTop;
  var current = element.offsetParent;
  while (current !== null){
    actualTop += current.offsetTop;
    current = current.offsetParent;
  }
  return actualTop;
}
</script>